<template>
  <div class="index-page">
    <div class="menu-container">
      <ul class="setting-menu">
        <li
          :class="{ active: current === 'sl' }"
          data-type="sl"
          @click="switchSetting('sl')"
        >
          <div class="setting-icon">
            <i class="iconfont icon-boom"></i>
          </div>
          <div class="menu-title">扫雷</div>
        </li>
        <li
          :class="{ active: current === 'sd' }"
          data-type="sd"
          @click="switchSetting('sd')"
        >
          <div class="setting-icon">
            <i class="iconfont icon-jiugongge"></i>
          </div>
          <div class="menu-title">数独</div>
        </li>
      </ul>
    </div>
    <div class="setting">
      <div class="basic-info" v-if="currentTab === 'sl'">
        <boom></boom>
      </div>
      <div class="personal-info" v-if="currentTab === 'sd'">
      </div>
    </div>
  </div>
</template>
<script>
import Boom from '../components/boom'
export default {
  name: 'game',
  components: { Boom },
  data: () => {
    return {
      current: 'sl',
      currentTab: 'sl'
    }
  },
  methods: {
    switchSetting (tab) {
      if (tab !== this.currentTab) {
        this.currentTab = tab
        this.current = tab
      }
    }
  },
  created () {
  }
}
</script>
<style scoped>
.menu-container {
  width: 25%;
  float: left;
  margin-top: 20px;
}
.menu-container .setting-menu > li {
  line-height: 50px;
  border-radius: 5px;
  font-size: 15px;
  cursor: pointer;
}
.menu-container .setting-menu > li.active {
  background: #f0f0f0;
}
.menu-container .setting-menu > li:hover {
  background: #f0f0f0;
}
.menu-container .setting-menu > li .setting-icon {
  display: inline-block;
  vertical-align: middle;
  width: 32px;
  height: 32px;
  background: #a0a0a0;
  border-radius: 5px;
  text-align: center;
  color: #fff;
  margin: 0 15px;
}
.menu-container .setting-menu > li .iconfont {
  line-height: 32px;
  vertical-align: top;
}
.menu-container .setting-menu > li .menu-title {
  text-align: left;
  display: inline-block;
  vertical-align: middle;
}
.setting {
  width: 69.2%;
  float: left;
  margin-left: 5.8%;
  margin-top: 20px;
}

.form-item-container {
  border-bottom: 1px solid #f0f0f0;
  padding: 20px 0;
}
.form-item-container:last-child {
  border-bottom: none;
}
.form-item-container /deep/ .el-form-item {
  margin-bottom: 0;
}
.form-item-container /deep/ .el-form-item__label {
  width: 25%;
  text-align: left;
  font-size: 15px;
  color: #969696;
}
.form-item-container /deep/ .el-form-item__content {
  width: 75%;
  float: left;
}
.form-item-container /deep/ .el-form-item__content .el-input {
  width: 250px;
}
.form-item-container /deep/ .el-form-item__content .el-input input {
  border: 1px solid #c8c8c8;
  border-radius: 4px;
  font-size: 15px;
  background: hsla(0, 0%, 71%, 0.1);
  height: 33px;
  line-height: 33px;
}
.form-item-container /deep/ .el-form-item__content .el-textarea textarea {
  border: 1px solid #c8c8c8;
  border-radius: 4px;
  font-size: 15px;
  background: hsla(0, 0%, 71%, 0.1);
  line-height: 33px;
}
.avatar-input {
  padding-top: 0;
  border-bottom: none;
}
.avatar-input .left {
  display: inline-block;
  vertical-align: middle;
  width: 25%;
}
.avatar-area {
  height: 100px;
  width: 100px;
  border-radius: 50px;
  background: #f0f0f0;
  position: relative;
  line-height: 100px;
  text-align: center;
  color: #969696;
}
.avatar-area img {
  height: 100px;
  width: 100px;
  border-radius: 50px;
  position: absolute;
  top: 0;
  left: 0;
}
.empty-btn {
  border: 1px solid #42c02e;
  border-radius: 40px;
  padding: 4px 12px;
  display: inline-block;
  font-weight: 400;
  font-size: 15px;
  color: #42c02e;
  cursor: pointer;
}
.submit-btn {
  width: 100px;
  margin: 30px 0 60px;
  border-radius: 20px;
  height: 30px;
  line-height: 30px;
  font-size: 15px;
  color: #fff;
  text-align: center;
  background: #3db922;
  cursor: pointer;
}
</style>
